<template>
    <div :class="props.class">
        <el-row style="height: 100%;">
            <el-col class="button-bar-left" :span="props.hideRightBar ? 24 : 18">
                <el-button v-for="button in props.buttonList" @click="props.onButtonClick(button)">
                    <el-image class="button-icon" :src="`/image/${button.icon}`" fit="fill" alt="" />
                    <span>{{ button.name }}</span>
                </el-button>
            </el-col>
            <el-col v-if="!props.hideRightBar" class="button-bar-right" :span="6">
                <el-button :icon="Refresh" @click="props.onRefresh">{{ lang.REFRESH }}</el-button>
                <el-button type="primary" :icon="Search" @click="props.onSearch">{{ lang.SEARCH }}</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { Refresh, Search } from "@element-plus/icons-vue";
import { lang } from "../lang";
const props = defineProps([
    "class",
    "buttonList",
    "onRefresh",
    "onSearch",
    "onButtonClick",
    "hideRightBar"
]);
</script>
<style scoped lang="less">
//���Բ���
.button-bar-left {
    display: flex;
    justify-content: start;
    align-items: center;

    .button-icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
}

.button-bar-right {
    display: flex;
    justify-content: end;
    align-items: center;
}
</style>
